Derived state is data that a React component computes from its existing props or state, rather than being stored as a separate state variable. The modern approach uses direct computation during rendering, while the legacy approach used getDerivedStateFromProps lifecycle method.
Derived state in React refers to any data that a component computes based on its existing props or state, rather than being stored or managed as an independent state variable. Instead of duplicating data and risking inconsistencies, derived state is calculated directly during the rendering phase, ensuring it always stays in sync with its sources. React provides two main ways to handle derived state: the modern recommended approach using direct computation, and the legacy approach using the getDerivedStateFromProps lifecycle method, which is now considered an anti-pattern in most cases.
Formatting data: Transforming dates, currencies, or strings for display (e.g., formatting a timestamp into a readable date).
Filtering or sorting: Computing a subset of data based on user input (e.g., filtering a list by a search term).
Combining data: Merging information from multiple props or state values (e.g., creating a full name from first and last names).
Conditional visibility: Determining if an element should be shown based on props or state (e.g., checking if a user has admin privileges).
Memoizing expensive calculations: Use
useMemoto prevent recomputing derived data on every render.Computing data based on props that change rarely: Even then, direct computation is simpler and less error-prone than storing derived state.
Any situation where you are tempted to use
getDerivedStateFromProps: The React documentation explicitly recommends against this pattern, as it often leads to bugs and complexity .
The most common mistake is using derived state to mirror props, which is often unnecessary and leads to bugs. If you find yourself storing props in state, ask whether you can use the props directly during rendering . For memoization of expensive computations, useMemo is the correct tool, not derived state stored in useState. The React team explicitly advises against using getDerivedStateFromProps for most use cases, as it often indicates a misunderstanding of React's data flow and leads to fragile components .